<template>
  <div class="chart-container">
    <div class="echart" id="mychart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { zhu } from "@/api/ycl/request";

export default {
  name: "zhu",
  mounted() {
    this.$nextTick(() => {
      this.list();
    });
  },
  methods: {
    list() {
      zhu().then(res => {
        console.log('请求成功，返回的数据:', res); // 打印数据以检查是否有异常
        if (res && res.code === 200 && Array.isArray(res.data) && res.data.length > 0) {
          this.zhuzhuangtu(res.data);
        } else {
          // 验证失败或数据为空
          console.warn('数据为空或格式不正确');
          this.zhuzhuangtu([]);
        }
      }).catch(error => {
        console.error('数据加载失败:', error);
        this.zhuzhuangtu([]);
      });
    },
    zhuzhuangtu(datm) {
      console.log('处理的数据:', datm); // 打印数据以检查是否有异常
      var datas = [];
      var xData = [];
      if (!Array.isArray(datm) || datm.length === 0) {
        // 如果数据为空或不是数组，使用默认数据
        datas.push({ value: 0, name: "男" }, { value: 0, name: "女" });
        xData.push("男", "女");
      } else {
        for (let i = 0; i < datm.length; i++) {
          console.log(`处理第 ${i} 条数据:`, datm[i]); // 打印每条数据以检查是否有异常
          if (datm[i].name && datm[i].total !== undefined) {
            datas.push({ value: datm[i].total, name: datm[i].name }); // 使用 total 作为值，name 作为名称
            xData.push(datm[i].name);
          }
        }
      }

      // 基本饼图
      const option = {
        title: {
          text: '设备类型报修统计',
          left: 'center',
          textStyle: {
            color: '#333',
            fontSize: 18
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: xData
        },
        series: [
          {
            name: '报修次数',
            type: 'pie',
            radius: '50%', // 设置饼图的半径
            data: datas,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              formatter: '{b}: {c} ({d}%)'
            }
          }
        ]
      };
      console.log('ECharts 配置:', option); // 打印 ECharts 配置以检查是否有异常
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      // 随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

<style scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: 100vh; /* 使容器高度占满整个视口 */
}

.echart {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
